<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>结算</title>
    <link rel="stylesheet" type="text/css" href="dist/css/bootstrap.min.css" th:href="@{/dist/css/bootstrap.min.css}">
    <link rel="stylesheet" type="text/css" href="css/index.css" th:href="@{/css/index.css}"/>
    <link rel="stylesheet" type="text/css" href="css/animate.css" th:href="@{/css/animate.css}"/>
    <link rel="stylesheet" type="text/css" href="css/cart.css" th:href="@{/css/cart.css}"/>

    <style type="text/css">
        .form-control {
            width: 100%;
        }
    </style>
</head>
<body>
<!--导航部分  begin-->
<div th:replace="common/header::header"></div>
<!--导航部分 end-->

<!--最顶端轮播图片 begin-->
<div th:replace="common/carousel::carousel"></div>
<!--最顶端轮播图片 end-->


<!--购物车 begin-->
<!--外层div-->
<div class="container">
    <!--左边-->
    <div class="col-md-8 col-sm-12">
        <ol class="breadcrumb">
            <li>
                <a href="#" class="text-success"><span class="glyphicon glyphicon-home"></span>&nbsp;&nbsp;送货地址</a>
            </li>
        </ol>

        <!--送货地址  begin-->
        <div style="margin-bottom: 5px;" id="addrDiv">
            <ul class="list-group" id="address">
                <li class="list-group-item" th:each="address:${addressList}" th:if="${not #lists.isEmpty(addressList)}">
                    <input type="radio" name="addr"
                           th:text="${address.province}+${address.city}+${address.area}+${address.detailAddress}"
                           th:value="${address.getId()}">&nbsp;
                </li>
                <li class="list-group-item" th:if="${#lists.isEmpty(addressList)}">当前没有收获地址，请添加收货地址~~</li>
            </ul>
            <a href="#" class="text-info" onclick="dispalyMoreAddr(this)">更多地址↓&nbsp;&nbsp;</a>
            <a href="javascript:void(0)" id="addAddr" class="text-success" data-toggle="modal" data-target="#addrModal">添加新地址</a>
        </div>
        <hr>


        <!--添加新地址模态框 begin-->
        <!-- 模态框（Modal） -->
        <div class="modal fade" id="addrModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="addLabel">
                            <span class="glyphicon glyphicon-home"></span>&nbsp;&nbsp;添加新收货地址
                        </h4>
                    </div>
                    <div class="modal-body">
                        <!--登录的form表单-->
                        <form action="#" id="addressForm" class="form-horizontal" role="form">
                            <div class="form-group">
                                <label class="col-md-2 control-label" style="margin-right: 2.9%;">所在地区:</label>

                                <div data-toggle="distpicker">
                                    <div class="form-group col-sm-12 col-md-3">
                                        <label class="sr-only" for="province1">Province</label>
                                        <select class="form-control" id="province1" name="province"></select>
                                    </div>
                                    <div class="form-group col-sm-12 col-md-3">
                                        <label class="sr-only" for="city1">City</label>
                                        <select class="form-control" id="city1" name="city"></select>
                                    </div>
                                    <div class="form-group col-sm-12 col-md-3">
                                        <label class="sr-only" for="district1">District</label>
                                        <select class="form-control" id="district1" name="area"></select>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group has-feedback" style="clear:both">
                                <label class="col-sm-2 control-label">详细地址:</label>
                                <div class="col-sm-5">
                                    <textarea class="form-control" id="deatails" name="detailAddress"></textarea>
                                </div>

                            </div>
                            <div class="form-group has-feedback">
                                <label class="col-sm-2 control-label">邮政编码</label>
                                <div class="col-md-5">
                                    <input type="text" class="form-control" id="lastname2" name="emailCode"
                                           placeholder="邮政编码">
                                    <span class="glyphicon glyphicon-hand-left form-control-feedback"></span>
                                </div>
                            </div>

                            <div class="form-group has-feedback">
                                <label class="col-sm-2 control-label">姓名</label>
                                <div class="col-sm-5">
                                    <input type="text" class="form-control" id="username" name="receiver"
                                           placeholder="收货人姓名">
                                    <span class="glyphicon glyphicon-user form-control-feedback"></span>
                                </div>
                            </div>

                            <div class="form-group has-feedback">
                                <label class="col-sm-2 control-label">电话</label>
                                <div class="col-sm-5">
                                    <input type="tel" class="form-control" id="tel" name="tel" placeholder="合法手机格式">
                                    <span class="glyphicon glyphicon-phone form-control-feedback"></span>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-sm-offset-2 col-sm-10">
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" id="setDefaultAddr" name="isDefault"><span
                                                class="text-success">设置默认地址</span>
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                <input type="button" class="btn btn-primary" value="提交地址" th:onclick="saveAddress()">
                            </div>
                        </form>
                        <!--form结束-->
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
        </div>
        <!--左边-->
        <ol class="breadcrumb">
            <li>
                <a href="#" class="text-success"><span class="glyphicon glyphicon-list-alt"></span>&nbsp;&nbsp;结算清单</a>
            </li>
        </ol>

        <!--购物车表格 begin-->
        <div class="table-responsive" id="imgDiv">
            <table class="table table-hover table-striped" style="vertical-align:middle;">
                <thead>
                <tr class="text-success success">
                    <th id="sequence">序号</th>
                    <th>图片</th>
                    <th>书名</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>合计</th>
                </tr>
                </thead>
                <tbody id="tby">
                <tr th:each="cartVo,iter:${list}">
                    <td th:text="${cartVo.getBookId()}"></td>
                    <td><img th:src="@{'/images/'+${cartVo.getImgUrl()}}"></td>
                    <td th:text="${cartVo.getBookName()}"></td>
                    <td th:text="${cartVo.getNewPrice()}+'元'"></td>
                    <td th:text="${cartVo.getCount()}"></td>
                    <td th:id="${'cartPrice' + iter.index}" th:text="${cartVo.getNewPrice()*cartVo.getCount()}"></td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <td colspan="4"></td>
                    <td class="text-success">总价:</td>
                    <td class="text-success" th:text="${session.cartInfo.getTotalPrice()}">345$:</td>
                </tr>
                <tr style="background-color: white;">
                    <td>
                        <a th:href="@{/book/index}" class="btn btn-info">&lt;&lt;继续购买</a>
                    </td>
                    <td colspan="4"></td>
                    <td>
                        <a th:onclick="commitOrder()" class="btn btn-warning">提交订单</a>
                    </td>
                </tr>
                </tfoot>
            </table>
        </div>
        <!--购物车 end-->
    </div>

    <!--右边-->
    <div class="col-md-4 col-sm-3 col-xs-8">
        <ol class="breadcrumb">
            <li>
                <a href="#" class="text-success"><span class="glyphicon glyphicon-shopping-cart "></span>我的购物车</a>
            </li>
            <li>
                <a href="javascript:void(0)" th:text="${session.cartInfo.getNum()}+'个商品'"></a>
            </li>
            <li>
                <a href="javascript:void(0)" th:text="'总价'+${session.cartInfo.getTotalPrice()}+'元'"></a>
            </li>
        </ol>

        <!--猜您喜欢-->
        <div>
            <span class="text-info"><span class="glyphicon glyphicon-heart"></span><span style="font-size: 20px; ">&nbsp;&nbsp;猜您喜欢</span></span>
            <div class="row" id="love">
                <div class="col-sm-12 col-md-12 wow fadeInRight animated">
                    <div class="thumbnail">
                        <a th:href="@{/book/detail(bookId=4)}"><img th:src="@{/images/cikehuakai.jpg} "
                                                                    style="height: 200px; "
                                                                    alt="通用的占位符缩略图 "></a>
                        <div class="caption ">
                            <h3>此刻花开</h3>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 col-md-12 wow fadeInRight animated">
                    <div class="thumbnail ">
                        <a th:href="@{/book/detail(bookId=15)}"><img th:src="@{/images/taikong.jpg} "
                                                                     style="height: 200px; "
                                                                     alt="通用的占位符缩略图 "></a>
                        <div class="caption ">
                            <h3>太空</h3>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 col-md-12 wow fadeInRight animated">
                    <div class="thumbnail ">
                        <a th:href="@{/book/detail(bookId=7)}"><img th:src="@{/images/lapulasidemonv.jpg}"
                                                                    style="height: 200px; "
                                                                    alt="通用的占位符缩略图 "></a>
                        <div class="caption ">
                            <h3>拉普拉斯的魔女</h3>
                        </div>
                    </div>
                </div>
                <div>
                    <ul class="pager ">
                        <li>
                            <a href="#" onclick="pageUp() ">&larr;上一页</a>
                            <a href="#" onclick="pageDown() ">下一页 &rarr;</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!--喜欢end-->
    </div>

    <!--首页底部信息 begin-->
    <div th:replace="common/footer::footer"></div>
    <!--end-->
</div>

<script src="dist/js/jquery.min.js" th:src="@{/dist/js/jquery.min.js}"></script>
<script src="js/carousel.js" th:src="@{/js/carousel.js}" type="text/javascript" charset="utf-8"></script>
<script src="dist/js/bootstrap.min.js" th:src="@{/dist/js/bootstrap.min.js}"></script>
<script src="js/wow.js" th:src="@{/js/wow.js}"></script>
<script src="dist/js/distpicker.data.min.js" th:src="@{/dist/js/distpicker.data.min.js}"></script>
<script src="dist/js/distpicker.min.js" th:src="@{/dist/js/distpicker.min.js}"></script>
<!--<script src="js/details.js" type="text/javascript" charset="utf-8"></script>-->
<!--<script src="js/cart.js" type="text/javascript" charset="utf-8"></script>-->
<script src="js/confirm_order.js" th:src="@{/js/confirm_order.js}"></script>
<script th:src="@{/js/login_register.js}"></script>
<script th:inline="javascript">
    //获取应用路径
    var contextPath = [[${#request.getContextPath()}]];
</script>
<script type="text/javascript">
    if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))) {
        new WOW().init();
    }
    ;

    //新增收货地址
    function saveAddress() {
        var addressData = $("#addressForm").serialize();
        $.ajax({
            url: contextPath + '/address/save',
            data: addressData,
            method: "post",
            success: function (data) {
                if (data == 'success') {
                    window.location.reload(true);
                }
            }
        })
    }

    // 提交订单
    function commitOrder() {
        var val = $('input:radio[name="addr"]:checked').val();
        if (val == null) {
            alert("请选择地址!");
            return;
        } else {
            window.location.href = contextPath + "/order/commitOrder?addrId=" + val;
        }
    }
</script>
</body>
</html>
